<template>
    <p class="title">第{{ index + 1 }}项</p>
    <a-form :model="detail">
      <a-form-item label="标题：" name="title" :style="{ marginBottom: '10px' }">
        <a-input
          v-model:value="detail.title"
          placeholder="请输入该细节标题"
          autocomplete="off"
        />
      </a-form-item>
  
      <a-form-item label="权重：" name="weight" :style="{ marginBottom: '10px' }">
        <a-input-number
          v-model:value="detail.weight"
          :min="1"
          :max="10"
          :step="1"
        />
      </a-form-item>
  
      <a-form-item
        label="评分细则描述："
        name="description"
        :style="{ marginBottom: '10px' }"
      >
        <a-textarea
          v-model:value="detail.description"
          placeholder="请输入评分细则描述"
          auto-size
        />
      </a-form-item>
    </a-form>
    <a-space :size="50">
      <a-button
        type="dashed"
        style="padding: 0 60px; margin: -20px 0 20px 10px"
        @click="plusDetail"
        >添加细则</a-button
      >
      <a-popconfirm
        title="确定要删除该细则?"
        ok-text="删除"
        cancel-text="取消"
        @confirm="deleteDetail(index, detail.id)"
      >
        <a-button
          type="dashed"
          danger
          ghost
          style="padding: 0 60px; margin-bottom: 20px"
          :disabled="itemLength > 1 ? false : true"
          >删除细则</a-button
        >
      </a-popconfirm>
    </a-space>
    <div style="border-bottom: 1px solid #d6d6d6"></div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  // 触发emit父组件事件相关逻辑 添加删除细则
  const useEmitEffect = (index: number, emit: any) => {
    const plusDetail = () => {
      emit("plusDetail", index);
    };
    const deleteDetail = async (index: number, id: number) => {
      emit("deleteDetail", index, id);
    };
    return { plusDetail, deleteDetail };
  };
  
  export default defineComponent({
    props: ["index", "detail", "itemLength"],
    emits: ["plusDetail", "deleteDetail"],
    setup(props, { emit }) {
      const { plusDetail, deleteDetail } = useEmitEffect(props.index, emit);
      return {
        plusDetail,
        deleteDetail,
      };
    },
  });
  </script>
  
  <style lang="less" scoped>
  .title {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
  </style>